<template>
	<view class="w_listset">
		<view class="baibox">
			<view class="baili" v-if="type==1">
				<view class="zhan weigh">
					微信帐号
				</view>
				<view class="bnt weigh rig">
					<input type="text" placeholder="请输入微信帐号" v-model="userInfo.wx_username">
				</view>
			</view>
			
			<view v-if="type==1" class="baili">
				<view class="zhan weigh">
					绑定人姓名
				</view>
				<view class="bnt weigh rig">
					<input type="text" placeholder="請输入绑定人姓名"  v-model="userInfo.wx_name">
				</view>
			</view>
			
			
			<view class="baili" v-if="type==2">
				<view class="zhan weigh" >
					支付宝帐号：
				</view>
				<view class="bnt weigh rig" >
					<input type="text"  placeholder="请输入支付宝帐号" v-model="userInfo.ali_username">
				</view>
			</view>
			
			<view v-if="type==2" class="baili">
				<view class="zhan" style="width: 50%;">
					绑定人姓名：
				</view>
				<view class="bnt " style="width:50%;text-align: right;">
					<input type="text" placeholder="请输入绑定人姓名"  v-model="userInfo.ali_name">
				</view>
			</view>
			
			
			<view v-if="type==3" class="baili">
				<view class="zhan">
					开户姓名：
				</view>
				<view class="bnt">
					<input type="text" placeholder="请输入开户姓名" disabled  v-model="userInfo.name">
				</view>
			</view>
			<view class="baili" v-if="type==3">
				<view class="zhan">
					身份证号：
					
				</view>
				<view class="bnt">
					<input type="text" placeholder="请输入身份证号" disabled v-model="userInfo.id_card">
				</view>
			</view>
			
			<view v-if="type==3" class="baili">
				<view class="zhan">
					银行卡号：
					
				</view>
				<view class="bnt">
					<input type="text" placeholder="请输入银行卡号"  v-model="userInfo.card">
				</view>
			</view>
				
			<view v-if="type==3" class="baili">
				<view class="zhan">
					预留号码：
				</view>
				<view class="bnt">
					<input type="text" placeholder="请输入预留号码"  v-model="userInfo.mobile">
				</view>
			</view>
			
			<view v-if="type==3" class="baili">
				<view class="zhan">
					验证码：
				</view>
				<view class="bnt" style="margin-left:30rpx">
					<input type="text" placeholder="请输入验证码"  v-model="code">
				</view>
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X"></u-code>
				 <u-button @tap="getCode" class="huo"   :text="tips" type="success" size="mini"></u-button>
			</view>
			
		
			<!-- <view class="baili"  >
				<view class="zhan">
					银行卡<span>*</span>
					<view class="bnt">
						可对首页价格和首页标签进行设置
					</view>
				</view>
				
			</view> -->
		</view>
	
		
		<view class="cont">
			<view>
				尊敬的用户，为了确保您的提现顺利进行，请您在填写收款账号时仔细核对以下信息：
			</view>
			<view>
				 账号类型：请确保您输入的账号类型与您的提现方式相匹配。例如，如果您使用的是银行卡提现，请确保您输入的是正确的银行卡号。
			</view>
			<view>
				 账号信息：请确保您输入的账号信息完整、准确无误。例如，如果您使用的是支付宝提现，请确保您输入的是正确的支付宝账号。 
			</view>
			<view>
				开户人姓名：请确保您输入的开户人姓名与您的真实姓名一致。这将有助于确保您的提现顺利进行。 开户银行：请确保您输入的开户银行与您的银行卡所属银行一致。这将有助于确保您的提现顺利进行。 
			</view>
			<view>
				分行名称：如果您的银行卡所属银行需要分行名称，请确保您输入的分行名称准确无误。
			</view>
			<view>
				 请注意，如果您输入的收款账号信息不正确，您的提现申请可能会被拒绝，并且可能会导致您的资金损失。因此，请您务必仔细核对您的收款账号信息，确保输入正确。如果您有任何疑问，请随时联系我们的客服团队。感谢您的支持和理解。
			</view>
			
		</view>

		<view class="wrap">
			<view class="tixian" @click="qr()">
				确定
			</view>
		</view>
		
		<!-- 验证弹窗 -->
		<u-popup mode="center" :show="show1">
			<view class="mask-tip">
				<view class="tit">
					验证提醒
				</view>
				<view class="phone">
					{{mobile}}
				</view>
				<view class="txt">
					您正在使用我们的提现功能
				</view>
				<view class="desc">
					为了保障您的资金安全，提现功能设置了手机号验证环节。这是我们对您账户安全的一项额外保护措施，确保只有您本人可以进行提现操作。
				</view>
				<view class="btn" @tap="sendCode()">
					开始验证
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="show1 = false" class="closepic" mode="aspectFit"></image>
		</u-popup>
		
		<u-popup mode="center" :show="show2">
			<view class="mask-tip">
				<view class="tit">
					提现验证提醒
				</view>
				<view class="txt">
					请输入验证码核实身份
				</view>
				<view class="code display-flex">
					<u-code-input
						v-model="code"
						:maxlength="6"
						space="5"
						size="33"
						:focus="true"
					></u-code-input>
				</view>
				<view class="btn" @tap="submit">
					开始验证
				</view>
				<view class="txt" style="margin-top: 12px;" @tap="show2=false,$go('/showcase/login/phone')">
					无法验证？切换绑定手机
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="show2 = false,code=''" class="closepic" mode="aspectFit"></image>
		</u-popup>
	</view>
	
</template>
<script>
	export default {
		data() {
			return {
				type:0,
				// 字数
				array: this.$db.get('config').word_count_label,
				index: 0,
				// 开关
				value: false,
				// 弹框
				show: false,
				userInfo: {},
				mobile: '',
				show1: false,
				show2: false,
				code: '',
				isRead: false,
				tips: '获取验证码',
				
				
			}
		},
		onLoad(ops) {
			console.log(ops.type,777777)
			this.type = ops.type;
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			qr(){
				if(this.type!=3){
					this.show1 = true;
					return;
				}
				
				this.submit();
				
				
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$api.default.request('user/sendSms', {
						mobile: this.userInfo.mobile,
					}).then((res) => {
						if (res.code) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast(res.msg);
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}else{
							this.$common.errorToShow(res.msg)
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 短信验证
			sendCode(){
				this.$api.default.request('user/sendSmsUser', {}).then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg, () => {
							this.show1=false
							this.show2=true
						})
					}
				})
			},
			saveWriterUserConfig() {
				var that = this
				var prams = {
					order_receiving_status: this.userInfo.writer_user_config.order_receiving_status
				}
				if (!this.userInfo.writer_user_config.hasOwnProperty('uid')) {
					prams['uid'] = this.userInfo.writer_user_config.uid
				}
				
				if (!this.userInfo.writer_user_config.word_price) {
					this.$common.errorToShow('未设置价格',()=>{
						this.userInfo.writer_user_config.order_receiving_status = 0
					},1000)
					return
				}
				// if (Array.isArray(this.userInfo.writer_diy_tags) && this.userInfo.writer_diy_tags.length === 0) {
				// 	this.$common.errorToShow('未设置标签')
				// 	return
				// }
			
				this.$api.default.request('good/list', {
					page: 1
				}).then((res) => {
					if (res.code) {
						if (res.data.total) {
							that.$api.default.request('user/saveWriterUserConfig', prams, 'POST', false).then((
								res) => {
									if (res.code == 1) {
										console.log(res.msg)
									} else {
										that.$common.errorToShow(res.msg, () => {
											that.userInfo.writer_user_config.order_receiving_status = 0
										})
									}
								})
						} else {
							that.$common.errorToShow('请先上传橱窗商品', () => {
								that.userInfo.writer_user_config.order_receiving_status = 0
							})
			
						}
					}
				})
			},
			setdata(type){
				this.type = type;
				this.show= true;
			},
			setting() {
				var that = this
				var prams = {
					word_price: this.userInfo.writer_user_config.word_price,
					word_count: this.userInfo.writer_user_config.word_count,
				}

				if (!prams['word_price']) {
					this.$common.errorToShow('请输入价格', () => {
						this.userInfo.writer_user_config.order_receiving_status = 0
					}, 1000)
					return
				}

				this.$api.default.request('user/saveWriterUserConfig', prams).then((res) => {
					if (res.code == 1) {
						that.$common.successToShow(res.msg, () => {
							that.show = false
						})
					}
				})

			},
			submit() {
				if(!this.code){
					this.$common.errorToShow('请输入验证码')
					return
				}
				
				var that = this
				this.userInfo.code = this.code
				this.userInfo.type = this.type
				this.$api.default.request('user/savawrdata1',this.userInfo).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							uni.navigateBack()
						})
					}
				})
			},
			getUserInfo() {
				this.$api.default.request('user/userInfoTx', {}, 'POST', false).then((res) => {
					if (res.code) {
						this.userInfo = res.data
					}
				})
				
				this.$api.default.request('user/getMyTxChe', {}, 'POST', false).then((res) => {
					if (res.code) {
						this.mobile = res.mobile
					}
				})
			},
			change(e) {
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				//对应的状态
				this.$api.default.request('user/setUserRolue',{type:e}).then((res) => {
					uni.hideLoading();
				})
			},
			// 弹框
			open() {

			},
			close() {
				this.show = false
			},
			// 字数
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.userInfo.writer_user_config.word_count = this.array[e.detail.value]
			},
		}
	}
</script>

<style lang="scss">
	input{
		font-size: 28rpx;
	}
	.closepic{
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin: 40rpx auto 0;
	}
	.mask-tip{
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding: 40rpx;
		box-sizing: border-box;
		text-align: center;
		font-family: '思源黑体';
		
		.tit{
			font-size: 16px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.phone{
			margin-top: 8px;
			font-size: 24px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.txt{
			margin-top: 4px;
			font-size: 12px;
			color: #45C4B0;
		}
		
		.desc{
			margin-top: 12px;
			text-align: left;
			font-family: Source Han Sans;
			font-size: 12px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.btn{
			margin-top: 30px;
			width: 100%;
			height: 43px;
			line-height: 43px;
			text-align: center;
			border-radius: 8px;
			background: #45C4B0;
			font-family: Source Han Sans;
			font-size: 14px;
			font-weight: bold;
			color: #FFFFFF;
		}
		
		.code {
			margin-top: 12px;
			padding: 0 20rpx;
			justify-content: center;
		}
	}
	
	page {
		background: rgba(242, 245, 242, 1);
	}

	.w_listset {
		.wrap {
			position: fixed;
			width: 100%;
			bottom: 0px;
			padding-top: 20rpx;
			background: #fff;
			min-height: 20rpx;;
			height: 120rpx;
			.tixian {
				
				width: 630rpx;
				height: 86rpx;
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				text-align: center;
				margin: 0 auto;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #FFFFFF;
				line-height: 86rpx;
			
			}
		}
		.cont{
			width: 90%;
			margin-left: 5%;
			color: #999;
			font-size: 22rpx;
			view{
				width: 100%;
				margin-top: 40rpx;
			}
		}
		.baibox {
			background-color: #FFFFFF;
			padding: 0 28rpx;
			.baili:last-child {
				border-bottom: none;
			}
			
			.rig{
				float:right;
				text-align: right;
			}
			.weigh{
				width: 50%;
			}
			
			.baiput {
				padding-left: 14rpx;
				flex-grow: 1;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
			.huo{
				background: #45C4B0 !important;
				color: #fff;
				font-size: 32rpx !important;
				font-weight: bold !important;
				// ?position: relative;
				width: 170rpx;
				border-radius: 0.5em;
			}

			.baili {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				height: 120rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				
				.zhan {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					.bnt{
						color: #999;
						font-size: 11px;
						font-weight: 500;
						input{
							font-size: 11px;
						}
					}	
					span{
						color: red;
						margin-left: 7rpx
					};
				}

				.left {
					flex-shrink: 0;

					.title {
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						padding-bottom: 10rpx;
						.bnt{
							color: #999;
							font-size: 11px;
							font-weight: 500;
						}
					}

					.txt {
						font-size: 24rpx;
						font-weight: normal;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
				}

				.centxt {
					font-size: 28rpx;
					font-weight: normal;
					text-align: right;
					letter-spacing: 0em;
					color: #999999;
					width: 440rpx;
				}

				.cenbox {
					flex-grow: 1;
					display: flex;
					align-items: center;
					// justify-content: flex-end;
					padding: 0 16rpx;

					.headpic {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.centxt {
						font-size: 28rpx;
						font-weight: normal;
						text-align: right;
						letter-spacing: 0em;
						color: #999999;
						width: 440rpx;
					}

					.qianbox {
						text-align: right;
						width: 450rpx;
						white-space: nowrap;

						.qli {
							background: rgba(153, 153, 153, 0.1);
							padding: 3rpx 12rpx 4rpx 8rpx;
							border-radius: 178px;
							font-size: 24rpx;
							color: #3D3D3D;
							display: inline-block;
						}

						.qli:not(:first-child) {
							margin-left: 16rpx;
						}
					}
				}

				.rarr {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}

		.ti {
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;
			margin: 0 auto;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #FFFFFF;
		}

		.mask {
			background-color: #FFFFFF;
			width: 500rpx;
			border-radius: 10px;
			padding: 30rpx;

			.jatitle {
				font-size: 28rpx;
				font-weight: bold;
				padding-bottom: 20rpx;
			}

			.japut {
				border-bottom: 1px solid #f2f2f2;
				font-size: 24rpx;
				color: #3D3D3D;
				padding-bottom: 15rpx;
				margin-bottom: 30rpx;
			}

			.qubox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.quli {
					border-radius: 8px;
					border: 1px solid #eeeeee;
					font-size: 24rpx;
					color: #999999;
					width: 220rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
				}

				.que {
					border-radius: 8px;
					border: 1px solid #45C4B0;
					background-color: #45C4B0;
					font-size: 24rpx;
					color: #ffffff;
					text-align: center;
					width: 220rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
	}
</style>